<template>
<div>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    <el-breadcrumb-item>商品分类</el-breadcrumb-item>
  </el-breadcrumb>
<!--  卡片视图区域-->
  <el-card>
    <el-row>
      <el-col>
        <el-button type="primary" @click="showAddDialog">添加分类</el-button>
      </el-col>
    </el-row>
<!--    表格-->
<tree-table :data="cateList"
            :columns="columns"
            :selection-type="false"
            :expand-type="false"
            :show-index="true"
            index-text=""
            border
            :show-row-hover="true"
class="treeTable">
<!--  是否有效模板-->
  <template slot="isOk" slot-scope="scope">
    <i class="el-icon-success size" v-if="scope.row.cat_deleted===false" style="color: lightgreen"></i>
    <i class="el-icon-error" v-else style="color:red"></i>
  </template>
<!--  排序列模板-->
  <template slot-scope="scope" slot="sort">
    <el-tag type="primary" v-if="scope.row.cat_level===0">一级</el-tag>
    <el-tag type="success" v-else-if="scope.row.cat_level===1">二级</el-tag>
    <el-tag type="warning" v-else>三级</el-tag>
  </template>
<!--操作列模板-->
  <template slot-scope="scope" slot="opt">
    <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row)">编辑</el-button>
    <el-button type="danger" icon="el-icon-delete" size="mini" @click="deletCate(scope.row)">删除</el-button>
  </template>
</tree-table>
<!--    分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[2,5,8, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </el-card>
<!-- 添加分类对话框 -->
  <el-dialog
      title="添加分类"
      :visible.sync="addDialogVisible"
      width="50%"
      @close="addDialogClosed"
      >
<!--    添加分类表单区域-->
    <el-form :model="addCateForm" :rules="addCateRules" ref="addCateRef" label-width="90px">
      <el-form-item label="分类名称" prop="cat_name">
        <el-input v-model="addCateForm.cat_name"></el-input>
      </el-form-item>
      <el-form-item label="分类级别">
<!--      options用来指定数据元   -->
        <el-cascader expand-trigger="hover" :options="parentCateList" :props="cascaderProps" v-model="selectedKeys" @change="parentCateChanged" clearable change-on-select>
        </el-cascader>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addCate">确 定</el-button>
  </span>
  </el-dialog>
<!--  编辑分类对话框-->
  <el-dialog
      title="编辑分类"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editDialogClosed"
      >
<!--    编辑分类表单区域-->
    <el-form ref="editFormRef" :model="editForm" label-width="80px" :rules="editFormRules">
      <el-form-item label="分类名称" prop="cate_name">
        <el-input v-model="editForm.cate_name"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editCate">确 定</el-button>
  </span>
  </el-dialog>

</div>
</template>

<script>
export default {
  name: "Cate",
  data(){
    return{
    //  商品分类的数据列表，默认为空
      cateList:[],
      // 查询数据列表
      queryInfo:{
        type:3,
        pagenum:1,
        pagesize:5
      },
      // 总数据的条数
      total:0,
      // table指定列的定义
      columns:[
          {
          label:'分类名称',
            prop:'cat_name',
          },
        {
          label: '是否有效',
          // width:'50px',
          // 表示当前列定义为模板列
          type:'template',
          // 表示当前这一列使用的模板名称,和 template 里面的slot名称相对应
          template:'isOk',
        },
        {
          label: '排序',
          type: "template",
          template: 'sort',
        },
        {
          label: "操作",
          type: "template",
          template: 'opt'
        }
      ],
      // 添加分类的对话框显示和隐藏
      addDialogVisible:false,
      // 添加分类的表单数据对象
      addCateForm:{
        cat_name:'',
        // 添加分类的层级,默认为1级
        cat_level:0,
        // 父级分类的id，默认为0
        cat_pid:0
      },
    //   添加分类的表单验证规则
      addCateRules:{
        cat_name:[
          { required: true, message: '请输入分类名称', trigger: 'blur' },
        ]
      },
      // 父级分类数据对象
      parentCateList:[],
      // 指定级联选择器的配置对象
      cascaderProps:{
        //  用来指定选项的值为选项对象的某个属性值
        value: 'cat_id',
        // 指定选项标签为选项对象的某个属性值
        label: 'cat_name',
        // 指定选项的子选项为选项对象的某个属性值
        children: 'children'
      },
      // 选中的父级分类的id数组
      selectedKeys:[],
      // 编辑分类对话框显示和隐藏
      editDialogVisible:false,
      // 编辑分类表单数据对象
      editForm:{
        cate_name:'',
        cate_id:0,
      },
      // 编辑分类验证规则
      editFormRules:{
        cate_name:[
          {required:true,message:'请输入新的分类',trigger:'blur'}
        ]
      }


    }
  },
  created() {
    this.getCateList();
  },
  methods:{
    // 获取商品分类的数据
   async getCateList(){
   const {data:res}=await  this.$http.get('categories',{
        params:this.queryInfo
      });
   if(res.meta.status !==200){
     return this.$message.error("获取商品列表失败")
   }
   // 获取商品列表成功
   //   console.log(res.data);
     this.cateList=res.data.result;
    this.total=res.data.total;
    },
    //监听 pagesize改变的事件
   async handleSizeChange(newSize){
        this.queryInfo.pagesize=newSize;
        this.getCateList();
    },
  //   监听pagenum 的改变
    handleCurrentChange(newPage){
     this.queryInfo.pagenum=newPage;
     this.getCateList();
    },
    // 添加分类按钮显示对话框
    showAddDialog(){
     this.getParentCateList();
     this.addDialogVisible=true;
    },
    // 获取前两级分类
   async getParentCateList(){
     const {data:res}=await this.$http.get('categories',{
       params: {type: 2}
     })
     if(res.meta.status !==200){
       return this.$message.error('获取父级分类列表失败')
     }
     // 成功
     this.parentCateList=res.data;
     // console.log(this.parentCateList);
   },
    // 添加分类对话框关闭重置表单
    addDialogClosed(){
      this.$refs.addCateRef.resetFields();
      this.selectedKeys=[];
      this.addCateForm.cat_pid=0;
      this.addCateForm.cat_level=0;

    },

    parentCateChanged(){
      // console.log(this.selectedKeys);
      // 如果selectedKeys数组中的length>0 ，则选中了父级分类
      let len=this.selectedKeys.length
      if(len>0){
        // 更新父级f分类id
        this.addCateForm.cat_pid=this.selectedKeys[len-1];
        // 更新当前分类的等级
        this.addCateForm.cat_level=len;
          return
      }else {
          // 添加的分类默认为一级分类
        this.addCateForm.cat_level=0;
        this.addCateForm.cat_pid=0;
      }
    },
    // 添加分类的按钮
    addCate(){
      // console.log(this.addCateForm);
      this.$refs.addCateRef.validate(async valid=>{
        if(!valid) return;
        // 通过表单预校验
        const {data:res}=await this.$http.post('categories',this.addCateForm);
        if(res.meta.status !==201){
          return this.$message.error('添加分类失败')
        }
      })
      // 添加分类成功
      this.getCateList();
      this.$message.success('添加分类成功');
      this.addDialogVisible=false;
    },
    // 编辑分类按钮
    showEditDialog(obj){
      console.log(obj.cat_name);
      this.editForm.cate_id=obj.cat_id;
      this.editForm.cate_name=obj.cat_name;
      this.editDialogVisible=true;
    },
    // 编辑分类对话框关闭
    editDialogClosed(){
     this.$refs.editFormRef.resetFields();
      this.editForm.cate_name='';
      this.editForm.cate_id=0;

    },
    // 提交编辑后的分类信息
    editCate(){
      this.$refs.editFormRef.validate(async valid=>{
        if(!valid){
          return
        }
        // 表单验证合法
        const {data:res}=await this.$http.put(`categories/${this.editForm.cate_id}`,{
          cat_name:this.editForm.cate_name
        })
        if(res.meta.status !==200){
          return this.$message.error('编辑分类失败')
        }
        this.$message.success("编辑分类成功");
        this.getCateList();
        this.editDialogVisible=false;
      })
    },
   async deletCate(obj){
      const confirmResult= await  this.$confirm('此操作将删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch(err=>err);
      if(confirmResult==='cancel'){
        return this.$message.info('已经取消删除该分类')
      }
      // 用户确定删除该分类
     const {data:res}=await this.$http.delete(`categories/${obj.cat_id}`);
      if(res.meta.status !==200){
        return this.$message.error('删除失败')
      }
      this.getCateList();
      this.$message.success("删除成功");
    }
  }

}
</script>

<style scoped lang="less">
.treeTable{
  margin-top: 15px;
}
.size{
  width: 20px;
  height: 20px;
}
</style>